// checkbox

<template>
    <div>
        <van-field v-model="checkNames"
                   readonly
                   :required="typeItem.required == 1"
                   :rules="[{'required': (typeItem.required == 1)}]"
                   :label="typeItem.surveyName"
                   :is-link="!disabled"
                   arrow-direction="down"
                   placeholder="请选择"
                   @click.native="show = true">
        </van-field>
        <v-popup-picker-btn v-model="show"
                            :arr="arr"
                            :check="pickerCheck"
                            @btn:click="emitBtnClick">
        </v-popup-picker-btn>
    </div>

</template>

<script>
import mixins from './mixins'

export default {
    mixins: [mixins],
    data () {
        return {
            show: false,
            pickerCheck: []
        }
    },
    computed: {
        // 选择项的集合
        arr () {
            let arr = this.confList.filter(item => {
                if (item.surveyTypeId == this.typeItem.surveyTypeId) {
                    // v-popup-picker-btn 组件需要code 和 name
                    this.$set(item, 'code', item.configId)
                    return true
                } else {
                    return false
                }
            })

            return arr
        },
        // 刷选出选中的集合
        checkItems () {
            let arr = this.confList.filter(item => {
                return this.valueList.some(value => value.configId == item.configId)
            })

            // 筛出选中的code
            this.pickerCheck = arr.map(item => item.code)

            return arr
        },
        // 选中的name
        checkNames () {
            let names = this.checkItems.map(item => item.name)

            return names.join(',')
        }
    },
    methods: {
        // 打开选择
        fnOpen () {
            if (!this.disabled) {
                this.show = true
            }
        },
        // 点击底部btn
        emitBtnClick (data) {
            if (data.type == 'clear') {
                this.fnHandleClear()
            } else {
                this.fnSetValueList(data.checkItems)
            }
        },
        // 清除所选
        fnHandleClear () {
            // this.valueList = this.valueList.filter(item => item.surveyTypeId != this.typeItem.surveyTypeId)
            for (let i = 0; i < this.valueList.length; i++) {
                if (this.valueList[i].surveyTypeId == this.typeItem.surveyTypeId) {
                    this.valueList.splice(i, 1)
                    i--
                }
            }
        },
        // 设置valueList
        fnSetValueList (pickerCheckItems) {
            // 清除valueList中存在的选项，再push
            this.fnHandleClear()

            pickerCheckItems.map(item => {
                let obj = this.$util.cloneDeep(this.model)

                obj.configId = item.configId
                obj.surveyTypeId = item.surveyTypeId
                obj.value = item.configId
                obj.value2 = item.name
                obj.riskListId = this.riskListId
                obj.filedType = this.typeItem.filedType
                obj.surveyName = this.typeItem.surveyName
                obj.textId = Math.uuid()

                this.valueList.push(obj)
            })
        }
    }
}
</script>
